<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="/pay/css/style.css">
  <script src="/pay/js/jquery-3.1.1.min.js" charset="utf-8"></script>
  <link rel="stylesheet" href="/pay/css/http_cdn.bootcss.com_bootstrap_4.5.2_css_bootstrap.css">
  <!-- Include Bootstrap JS -->
  <script src="/pay/js/http_cdn.bootcss.com_bootstrap_4.5.2_js_bootstrap.js"></script>
</head>

<body>
<div class="One_Jdbox">
  <div class="Jdbox_head">
    <img src="/pay/img/logo1.jpg" alt=""><span class="bank">收银台</span>
    <ul>
      <li><span>UMALL商城 | </span><span>退出</span></li>
      <li><a href="http://localhost:10013/listOrder">我的订单</a></li>
      <li>支付帮助</li>
    </ul>
  </div>
  <div class="Jdbox_BuySuc">
    <dl>
      <dt><img src="/pay/img/saoyisao.png" alt=""></dt>
      <dd>
        <span>订单提交成功，请尽快付款！订单号：70715901829</span>
        <span>应付金额<font>￥[[${#numbers.formatDecimal(orderConfirmData.total, 3, 2)}]]</font>元</span>

      </dd>
      <dd>
        <span>推荐使用</span>
        <span>扫码支付请您在<font>24小时</font>内完成支付，否则订单会被自动取消(库存紧订单请参见详情页时限)</span>
        <span>订单详细</span>
      </dd>
    </dl>
  </div>
  <div class="Jd_Con">
    <p class="JdCon_title"><img src="/pay/img/title.png" alt=""></p>
    <div class="Jd_Fenqi">
      <ul>
        <li><img src="/pay/img/BAITIAO_2.0.png" alt="">打白条</li>
        <li>
          <span>可用额度 7275.38元</span>
          <span>白条还款日 2018-01-27</span>
          <span><font>优惠</font>随机立减(最高10元)</span>
        </li>
        <li>支付<font>￥[[${#numbers.formatDecimal(orderConfirmData.total, 3, 2)}]]</font>元</li>
      </ul>
      <ol>
        <li>
          <p>不分期</p>
          <p>0服务费</p>
        </li>
        <li>
          <p>3期</p>
          <p>9.48元/期</p>
        </li>
        <li>
          <p>6期</p>
          <p>4.94元/期</p>
        </li>
        <li>
          <p>12期</p>
          <p>2.35元/期</p>
        </li>
        <li>
          <p>24期</p>
          <p>1.44元/期</p>
        </li>
      </ol>
    </div>

  </div>
  <div class="container">
    <div class="Jd_footer">
      <ul>
        <li>
          <img src="/pay/img/weixin.png" alt="">微信支付
        </li>
        <li>
          <img src="/pay/img/zhifubao.png" style="width: auto; height: 30px;" alt="">
          <a href="#" id="alipay-button" data-toggle="modal" data-target="#myModal">支付宝</a>
        </li>
      </ul>
    </div>

    <!-- 新的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">支付宝二维码</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <!-- 在这里添加你的新支付方式的内容，例如新的二维码图片 -->
            <img src="/pay/img/fukuanma.png" alt="打开支付宝扫描二维码" height="478px" width="485px">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
<script type="text/javascript">

  $(document).ready(function () {
    // 不再需要点击事件处理程序，Bootstrap的data-toggle和data-target属性会处理模态框的显示
  });

  //头部订单成功 订单详细鼠标移入效果
  $(".Jdbox_BuySuc dl dd:last-child span:last-child").mouseover(function () {
    $(this).css({"cursor": "pointer", "color": "#E31613"})
  }).mouseout(function () {
    $(this).css("color", "#7EA4FF")
  });
  //分期付款鼠标移入hover效果
  $(".Jd_Fenqi>ol li:not(:first-child)").mouseover(function () {
    $(this).css({"cursor": "pointer", "border": "1px solid #E31613"})
  }).mouseout(function () {
    $(this).css("border", "1px solid #C9DFFF")
  });
  //支付方式按钮选择hover效果
  $(".Jd_main ul li:nth-child(3) button").mouseover(function () {
    $(this).css({"cursor": "pointer", "color": "#E31613"})
  }).mouseout(function () {
    $(this).css("color", "#67A4FF")
  });
  //忘记密码鼠标移入效果
  $(".Jd_main ul li:nth-child(4) span").mouseover(function () {
    $(this).css({"cursor": "pointer", "color": "#E31613"})
  }).mouseout(function () {
    $(this).css("color", "#67A4FF")
  });
  //立即支付按钮效果
  $(".Jd_main ul li:nth-child(5) button").mouseover(function () {
    $(this).css({"cursor": "pointer", "background": "#FF5350"})
  }).mouseout(function () {
    $(this).css("background", "#FC6E6C")
  });

  $(".Jd_footer ul li").mouseover(function () {
    $(this).css({"cursor": "pointer", "color": "#E31613"})
  }).mouseout(function () {
    $(this).css("color", "#5E5E5E")
  });

  $(".Jdbox_head>ul li span").mouseover(function () {
    $(this).css({"cursor": "pointer", "color": "#E31613"})
  }).mouseout(function () {
    $(this).css("color", "#666666")
  });
  $(".Jdbox_head>ul li:not(:first-child)").mouseover(function () {
    $(this).css({"cursor": "pointer", "color": "#E31613"})
  }).mouseout(function () {
    $(this).css("color", "#666666")
  });
  $(".Jd_Fenqi ul li:first-child").mouseover(function () {
    $(this).css({"cursor": "pointer", "color": "#666666"})
  }).mouseout(function () {
    $(this).css({"color": "black"})
  })
</script>
</html>
